<template>
  <div>
    <el-container>
      <el-header>
        <Nav>
          <i @click="goback" class="el-icon-arrow-left" slot="icon"></i>
          <div class="title" slot="input">用户登录</div>
        </Nav>
      </el-header>
      <el-main>
        <div v-if="getShow" class="login-box">
          <el-input
            type="text"
            v-model="username"
            placeholder="请输入用户名"
            class="username"
          ></el-input>
          <el-input
            type="password"
            v-model="password"
            placeholder="请输入密码"
            class="password"
          ></el-input>
          <el-button class="login" @click="login">登录</el-button>
        </div>
        <div v-else class="shop-box">
          <el-input
            type="text"
            v-model="title"
            placeholder="商品名称"
            class="password"
          ></el-input>
          <el-input
            type="text"
            v-model="price"
            placeholder="商品价格"
            class="password"
          ></el-input>
          <el-select class="select" v-model="value" placeholder="商品分类">
            <el-option
              v-for="item in options"
              :key="item._id"
              :value="item.classify"
            >
            </el-option>
          </el-select>
          <el-input
            type="text"
            v-model="img"
            placeholder="商品图片"
            class="password"
          ></el-input>
          <el-button @click="submit" class="login">发布商品</el-button>
        </div>
      </el-main>
      <el-footer>
        <Footer-Box></Footer-Box>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { Nav } from "../nav/index.js";
import { FooterBox } from "../footerBox/index.js";
import axios from "axios";
export default {
  data() {
    return {
      username: "",
      password: "",
      isLogin: true,
      title: "",
      price: "",
      classify: "",
      img: "",
      options: [],
      value: "",
    };
  },
  components: {
    Nav,
    FooterBox,
  },
  methods: {
    goback() {
      this.$router.push("/");
    },
    login() {
      axios
        .post("/login", {
          username: this.username,
          password: this.password,
        })
        .then((data) => {
          // console.log(data);
          // this.$message(data)
          this.$message({
            message: data.data,
            type: "success",
            // duration:0
          });
          location.reload();
        });
    },
    getClassify() {
      axios.get("/getClassify").then((data) => {
        // console.log(data);
        this.options = data.data;
      });
    },
    submit() {
      axios
        .post("/postShop", {
          title: this.title,
          price: this.price,
          img: this.img,
          classify: this.value,
        })
        .then((data) => {
          // console.log(data);
          this.$message({
            message:data.data,
            type:"success"
          });
          this.title = "";
          this.price = "";
          this.value = "";
          this.img = "";
        });
    },
  },
  computed: {
    getShow() {
      return document.cookie == "";
    },
  },
  created() {
    this.getClassify();
  },
};
</script>

<style scoped>
.el-container {
  height: 100vh;
  display: flex;
}
.nav-box {
  background-color: #fff;
  border-bottom: 1px solid #c2c8d1;
}
.el-header {
  height: 45px !important;
}
i {
  color: rgba(0, 0, 0, 0.5);
  font-size: 30px;
}
.title {
  text-align: center;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
}
.el-main {
  background-color: #f4f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.login-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.username {
  width: 80%;
  height: 46px;
  font-size: 20px;
}
.password {
  width: 80%;
  height: 46px;
  font-size: 20px;
}
.login {
  width: 80%;
  height: 46px;
  font-size: 20px;
}
.shop-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.select {
  width: 80%;
  height: 46px;
  font-size: 20px;
}
.select >>> .el-input__inner {
  font-size: 20px;
}
.el-footer {
  height: 50px !important;
  width: 100vw;
  position: fixed;
  bottom: 0px;
  z-index: 1000;
  padding: 0px;
}
</style>